<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Event Bubbling</title>
    <script type="text/javascript">
        function mousedown(nsEvent) {
            var theEvent = nsEvent ? nsEvent : window.event;
            var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
            var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
            alert(locString + " " + theSrc);
        }
    
        document.onmousedown = function(event) {
            var theEvent = event ? event : window.event;
            alert(theEvent.type);
        }

        window.onload = setupEvents;

        function setupEvents() {
            document.getElementById("first").onmousedown = mousedown;
            document.getElementById("second").onmousedown = function() {
                alert("Second event handler");
            }
        }
    </script>
</head>

<body>
    <div id="first" style="padding: 20px; background-color: #ff0; width: 150px;">
        <div id="second" style="background-color: #f00; width: 100px; height: 100px;"></div>
    </div>
</body>